<template>
  <div class="container">
    <div class="content">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script setup>
import { ref,markRaw } from 'vue';
import Controller from "@/views/ControllerManagerView.vue";
import {HOME_MENU_LIST} from "@/enum/enmu-home-menu"

const currentComponent = ref(markRaw(Controller)); // 默认显示的组件
const selectComponent = (componentName) => {
  HOME_MENU_LIST.forEach((item,index)=>{
    if(componentName===item.name){
      currentComponent.value = markRaw(item.component);
    }
  })
};


const isActive = (component) => {
  return currentComponent.value === component;
};


</script>

<style scoped lang="less">
.container {
  display: flex;
  height: 100vh;
  overflow-y: auto; // 当内容多余一个屏幕的时候按照内容来显示
  background-color: #f4f4f4;
  .sidebar {
    width: 250px;
    padding: 20px;
    .sys-name{
      font-size: 18px;
      font-weight: bold;
      color: #2D3748;
    }
    ul{
      margin-top: 50px;
      li{
        margin: 10px 0;
        cursor: pointer;
        width: 220px;
        height: 54px;
        line-height: 54px;
        color: #A0AEC0;
        >span{
          display: inline-block;
          margin-left: 10px;
          color:#00c9bb;
        }
      }
      // 活跃的菜单栏的样式
      .active {
        background-color: white;
        color: #2D3748;
        font-weight: bold;
        border-radius: 10px;
      }
    //  字体图标的样式

    }
  }
  .content {
    flex-grow: 1;
    padding: 20px;
  }

}

</style>